<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对比temolate与render的区别</title>
</head>
<body>
<div id="app">
    <com :level="num">{{munsss}}</com>
</div>
<script src="../vue.js"></script>
<!--<script type="text/x-template" id="com">
    <h1 v-if="level === 1">
        <slot>神女控</slot>
    </h1>
    <h2 v-else-if="level === 2">
        <slot>你经常为空</slot>
    </h2>
    <h3 v-else-if="level === 3">
        <slot>十多个</slot>
    </h3>
    <h4 v-else-if="level === 4">
        <slot>阿萨德公司认购</slot>
    </h4>
    <h5 v-else-if="level === 5">
        <slot>是否GV</slot>
    </h5>
    <h6 v-else-if="level === 6">
        <slot>是v</slot>
    </h6>
</script>-->
<script>
    var com = {
        // template:"#com",
        /*
        第一个参数：{string|object|function} 'div' 标签
        第二个参数：{object}   {对象}
        第三个参数：{string|array} '字符串' 或者 [字符串]
        */
        render:function(createElement,context){
          return createElement('h'+this.level,this.$slots.default);
        },
       props:{
           level:{
               type : Number,
           },
       },
    }
    new Vue({
        el:"#app",
        data(){
            return {
                num:2,
                munsss:'收到女为'
            }
        },
        components:{
            com,
        }
    })
</script>
</body>
</html>